<input type="text'" id="fav">
<input type="text'" id="high">
<script type="text/javascript">
 function Vue(){//一个自定义函数Vue 也是自定义对象Vue 
  //this.fav;
  this.el={"fav":document.getElementById('fav'),"high":document.getElementById('high')};//定义el变量表示 当前的文本框的内容
// this.render();
    this.data={"fav":"足球","high":"172"};
    this.observe(this);//此处调用的目的是为了将标签和 js对象绑定，括号里的this代表vue的对象，自己调用了一个方法把自己传进去
 
 }

//Object是 js提供类的类（函数）.的定义属性的方法，改方法需要3个参数 分别 对象，属性名，属性的操作



Vue.prototype.observe = function(vue){//给某个类（函数）绑定一个方法 这个对象就可以在对象内部使用this来访问方法

for(let key in vue.data){
  let value;//需要再定义一个对象 来保存传递过来值，
//第二参数是 字符串 单个对象取 和 集合循环中取出来要注意区别
//
var  self = this;//如果当前的observe方法是个普通的js方法 this代表的是当前页面，而用propotype绑定的方法 this代表队vue对象（prototype，谁调用的prototype里面的this就是谁）

  var dataObj = vue.data;

 Object.defineProperty(dataObj,key,{
   get:function(){
   	return value;//注意主要额外用一个保存了值 变量来操作，否则要引起递归 直接使用vue对象的fav属性无论是赋值还是取值都会激活get set
   },
   set:function(newValue){
    value = newValue;
    //console.log(self);
    self.render(key);//此处不能写this 因为这里的this代表的是vue

    //需要考虑清楚渲染方法找谁要 
    //console.log(this);
   }
 });
}
}

 function getCurrentFav(vue){//定时器调用这个方法 实现了 不断读取标签的最新值 并赋值给js对象，由于赋值给js对象又会调用set方法，而set方法又调用了渲染方法，能够保证无论是js修改 js对象的值 还是用户输入了文本框的值 双方都同步了
  for(key in vue.data){
 	 let val = vue.el[key].value==='undefined'?'':vue.el[key].value;
  // console.log(key + "   " + val+"   mmm");
   if(vue.data[key] != val){
   vue.data[key] = val;
 }else{
  console.log("值相等没有重新渲染");
 }
  }

 }

 Vue.prototype.render=function (key){
 	 this.el[key].value=this.data[key];// 这个this代表当前vue对象，将js对象值 赋予对应的html元素的值
 }
   var vue = new Vue();//vue的对象 需要在类的生命完成之后再new出来，new早了少方法
 setInterval(function(){
   getCurrentFav(vue);
 },500);//定时器调用取值方法
</script>